
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同步与异步</title>
</head>
<body>
    
    <button  id="btn">点击</button>
    <!-- 
        同步：
            当前调用发出之后在没有得到结果之后后续代码不能执行、一直处在等待状态，
            同步是阻塞的。
            执行是一步一步的执行  前边步骤没有结束 后边得阻塞等待
            独木桥
            
        异步：
            当前调用发出之后在没有得到结果之前后续代码可以执行，
            当前调用的结果会以回调函数方式来告诉调用者，
            异步是非阻塞的。
            双向6车道  

    -->
    <script>

         // ============模拟同步==================

        // console.log("111");
        // function fn() {
        //     console.log("222");
        //     alert('我是同步代码，回阻塞后面的代码执行')
        // }
        // fn()
        // console.log("333");


          // ============模拟异步  回调函数==================
          console.log("111");
            function fn() {
                console.log("222");
                // 宏任务
                setTimeout(() => {
                    alert('我是异步代码，不会阻塞后面的代码执行')
                    
                }, 1000);
            }
            fn()
            // 事件触发方法  
            document.querySelector("#btn").onclick = function () {
                console.log("事件触发方法是异步的");
                
            }
            console.log("333");

        // 异步：异步操作方式  js 
        // 1：回调  callback函数   cb
        // 2：Promise 
        // 3: generator函数   KOA     
        // 4: async函数       KOA2     node+mongoosedb     express   KOA   KOA2主流
        // 5: 事件触发方法  
        
        
        // 1：回调  callback函数   cb

        function count(a,b,callback) {
            setTimeout(() => {
                // return a+b
                callback(a+b)
            }, 0);
        }
            
        console.log(count(1,2,function (p) {console.log("时间一到计算完",p);}));
        


    </script>
</body>
</html>